<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>小白学院-IT人的自我成长社区</title>

    <!-- Bootstrap -->
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link rel="shortcut icon" href="https://www.bilibili.com/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/index.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.bootcss.com/html5shiv/3.7.3/html5shiv.min.js"></script>
    <script src="https://cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<!--头部开始-->
<header id="header">
    <!--上部分-->
    <div class="top-bar hidden-sm hidden-xs text-muted">
        <div class="container">
            <div class="row">
                <div class="top-bar-1 col-md-2">
                    <a href="" class="text-muted">
                        <span class="glyphicon glyphicon-list-alt"></span>
                        <span>关注微信号</span>
                        <span class="glyphicon glyphicon-chevron-down"></span>
                        <img src="img/ma.png" width="130px" class="ma">
                    </a>
                </div>
                <div class="top-bar-2 col-md-5">
                    <span class="glyphicon glyphicon-earphone"></span>
                    <span>8888-555-6666 (服务时间：9:00-21:00)</span>
                </div>
                <div class="top-bar-3 col-md-2">
                    <a href="" class="text-muted">校企合作</a>
                    <a href="" class="text-muted">培训师</a>
                </div>
                <div class="top-bar-4 col-md-3">
                    <a class="btn btn-default btn-sm" href="#" role="button">免费注册</a>
                    <a class="text-muted" href="#" role="button" style="margin-left: 10px">立即登录</a>
                </div>
            </div>
        </div>
    </div>
    <!--上部分结束-->
    <!--导航条部份开始-->
    <nav class="navbar navbar-default navbar-static-top my-nav">
        <div class="container my-nav">
            <!-- Brand and toggle get grouped for better mobile display -->
            <div class="navbar-header my-nav" style="padding-right: 20px">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#">
                    <img src="img/logo.png" width="140px" style="margin-top: -15px;margin-left: 15px;" class="img-responsive">
                </a>
            </div>

            <!-- Collect the nav links, forms, and other content for toggling -->
            <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                <ul class="nav navbar-nav my-nav my-nav-list">
                    <li class="guanyu"><a href="#">关于我们 <span class="sr-only">(current)</span></a></li>
                    <li class="jieshao"><a href="#">课程介绍</a></li>
                    <li class="remen"><a href="#">热门课程</a></li>
                    <li class="mingshi"><a href="#">名师授课</a></li>
                    <li><a href="#">课堂互动</a></li>
                    <li class="lianxi"><a href="#">联系我们</a></li>
                </ul>
                <ul class="nav navbar-nav navbar-right hidden-sm hidden-xs my-nav-list">
                    <li><a href="#">个人中心</a></li>
                </ul>
            </div><!-- /.navbar-collapse -->
        </div><!-- /.container-fluid -->
    </nav>
    <!--导航条部份结束-->
</header>
<!--头部结束-->

<!--轮播图开始-->
<div id="carousel">
    <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ol class="carousel-indicators">
            <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
            <li data-target="#carousel-example-generic" data-slide-to="1"></li>
            <li data-target="#carousel-example-generic" data-slide-to="2"></li>
        </ol>

        <!-- Wrapper for slides -->
        <div class="carousel-inner" role="listbox">
            <div class="item active item1">
            </div>
            <div class="item item2">
            </div>
            <div class="item item3">
            </div>
        </div>

        <!-- Controls -->
        <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
            <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
            <span class="sr-only">Previous</span>
        </a>
        <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
            <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
            <span class="sr-only">Next</span>
        </a>
    </div>
</div>
<!--轮播图结束-->

<!--关于我们开始-->
<section id="about">
    <div class="container">
        <div class="row">
            <div class="col-md-12 about-title">关于我们</div>
        </div>
    </div>
    <div class="container">
        <div class="row">
            <div class="col-md-8 about-info">
                轻轻的雾，细细的雨。悠悠的飘来，随风随雨落在了这朦胧的小镇。黑瓦流淌着雨水，在万千的屋檐下汇集了一片海洋，顺着屋檐流下，斑驳了流年。
                一场风雨一场泪流。阴冷的思念，吹拂中翻起了忘却的记忆，在小巷的角角落落里拾起爱的碎片。拼成完整的故事，随烟雨游荡在小镇。
                隔着三秋，躲着寒月。趁红叶未落，杏花挂满树，十月里，寻找着前世的一段段文字，石桥上，默默的念着一个人，追逐着岁月的那一篇篇情书。砚池未干的浓墨，还在写着那段思念。
                我撑开一片烟雨，画满撇捺横竖。不知是不是能够画到你的心里，明白画的含义?撇捺是思，横竖为念，一镇的烟雨，摇曳了蜿蜒的景致，把一伞伞青花飘落到彼岸，再请花开一片，给你铺一条回来渡口的路。
            </div>
            <div class="col-md-4">
                <img src="img/4.jpg"  class="img-responsive">
            </div>
        </div>
    </div>
</section>
<!--关于我们结束-->

<!--产品特色开始-->
<section id="product">
    <div class="container">

        <!-- Nav tabs -->
        <ul class="nav nav-tabs" role="tablist">
            <li role="presentation" class="active"><a href="#home" aria-controls="home" role="tab" data-toggle="tab">在线大学</a></li>
            <li role="presentation"><a href="#profile" aria-controls="profile" role="tab" data-toggle="tab">会员专享</a></li>
            <li role="presentation"><a href="#messages" aria-controls="messages" role="tab" data-toggle="tab">优质视频</a></li>
            <li class="pull-right hidden-xs hidden-sm"><a href="#settings" aria-controls="settings" data-toggle="tab">更多</a></li>
        </ul>

        <!-- Tab panes -->
        <div class="tab-content">
            <div role="tabpanel" class="tab-pane fade in active" id="home">
                <div class="container">
                    <div class="row">
                        <div class="col-md-8">
                            <div class="line-one">
                                <img src="img/ma.png" width="130px" height="180px">
                                <div class="text-box">
                                    <p>更多资讯欢迎</p>
                                    <p>关注小白学院</p>
                                </div>
                            </div>
                            <div class="line-two">
                                HTML5+全栈 / Python+人工智能 / JavaEE / GO语言+区块链
                            </div>
                            <div class="line-three">
                                欢迎来到IT人的在线大学 &nbsp;&nbsp;<span style="color: rgb(148,57,60);font-weight: bold">小白学院</span>
                            </div>
                            <div class="line-four">
                                <button type="button" class="btn btn-default">课堂咨询</button>
                                <button type="button" class="btn btn-default" style="margin-left: 20px">了解更多</button>
                            </div>
                        </div>
                        <div class="col-md-4">
                            <img src="img/5.jpg" width="70%" style="margin-top: 20px">
                        </div>
                    </div>
                </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="profile">
                <div class="container">
                    <div class="row">
                        <div class="col-md-4">
                            <img src="img/6.jpg" width="70%" style="margin-top: 20px">
                        </div>
                        <div class="col-md-8">
                            <p class="vip-title">小白学院会员</p>
                            <p class="vip-info">
                                犹记曾经，君袭一屡白衣，从陌上花开的小径款款而来，桃花灼灼，惊起了我的一帘幽梦。从此，诗词歌赋，烟雨桃花，都失去了色彩，只有君的身影，丝丝抨击着心海。
                                一年一度秋风近，风儿翩翩吹起来。此时，桥边的芍药，正生的红艳，梨花艳艳地开着。熟悉的地方，陌生的氛围，却没有了你的踪影。日日思君不见君，即使花艳又如何。
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            </div>
            <div role="tabpanel" class="tab-pane fade" id="messages">

            </div>
        </div>

    </div>
</section>
<!--产品特色结束-->

<!--热门课程开始-->
<section id="hot">
    <div class="container">
        <div class="row">
            <div class="col-md-12 about-title" style="margin-top: 20px">热门课程</div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <img src="img/1.jpeg" width="100%" style="border-radius: 50%;border: 4px solid #ccc">
                    </div>
                    <div class="col-md-6" style="margin-top: 20px">
                        <span style="color: rgb(148,57,60);font-weight: bold;font-size: 18px">【热】</span>
                        <span style="font-weight: bold;font-size: 18px;">从零玩转HTML5+跨平台</span>
                        <p style="font-size: 13px;color: rgb(127,127,127);margin-top: 5px;margin-left: 5px;">李南江老师带你从零入门大前端开发，So Easy，To
                            Happy ！</p>
                    </div>
                    <div class="col-md-3" style="color:rgb(148,57,60); margin-top: 50px;">
                        206节课
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <img src="img/2.jpeg" width="100%" style="border-radius: 50%;border: 4px solid #ccc">
                    </div>
                    <div class="col-md-6" style="margin-top: 20px">
                        <span style="color: rgb(148,57,60);font-weight: bold;font-size: 18px">【热】</span>
                        <span style="font-weight: bold;font-size: 18px;">从零玩转HTML5+跨平台</span>
                        <p style="font-size: 13px;color: rgb(127,127,127);margin-top: 5px;margin-left: 5px;">李南江老师带你从零入门大前端开发，So Easy，To
                            Happy ！</p>
                    </div>
                    <div class="col-md-3" style="color:rgb(148,57,60); margin-top: 50px;">
                        206节课
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <img src="img/3.jpeg" width="100%" style="border-radius: 50%;border: 4px solid #ccc">
                    </div>
                    <div class="col-md-6" style="margin-top: 20px">
                        <span style="color: rgb(148,57,60);font-weight: bold;font-size: 18px">【热】</span>
                        <span style="font-weight: bold;font-size: 18px;">从零玩转HTML5+跨平台</span>
                        <p style="font-size: 13px;color: rgb(127,127,127);margin-top: 5px;margin-left: 5px;">李南江老师带你从零入门大前端开发，So Easy，To
                            Happy ！</p>
                    </div>
                    <div class="col-md-3" style="color:rgb(148,57,60); margin-top: 50px;">
                        206节课
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <img src="img/4.jpeg" width="100%" style="border-radius: 50%;border: 4px solid #ccc">
                    </div>
                    <div class="col-md-6" style="margin-top: 20px">
                        <span style="color: rgb(148,57,60);font-weight: bold;font-size: 18px">【热】</span>
                        <span style="font-weight: bold;font-size: 18px;">从零玩转HTML5+跨平台</span>
                        <p style="font-size: 13px;color: rgb(127,127,127);margin-top: 5px;margin-left: 5px;">李南江老师带你从零入门大前端开发，So Easy，To
                            Happy ！</p>
                    </div>
                    <div class="col-md-3" style="color:rgb(148,57,60); margin-top: 50px;">
                        206节课
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin-top: 30px;">
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <img src="img/7.jpg" width="100%" style="border-radius: 50%;border: 4px solid #ccc">
                    </div>
                    <div class="col-md-6" style="margin-top: 20px">
                        <span style="color: rgb(148,57,60);font-weight: bold;font-size: 18px">【热】</span>
                        <span style="font-weight: bold;font-size: 18px;">从零玩转HTML5+跨平台</span>
                        <p style="font-size: 13px;color: rgb(127,127,127);margin-top: 5px;margin-left: 5px;">李南江老师带你从零入门大前端开发，So Easy，To
                            Happy ！</p>
                    </div>
                    <div class="col-md-3" style="color:rgb(148,57,60); margin-top: 50px;">
                        206节课
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="row">
                    <div class="col-md-3">
                        <img src="img/8.jpg" width="100%" style="border-radius: 50%;border: 4px solid #ccc">
                    </div>
                    <div class="col-md-6" style="margin-top: 20px">
                        <span style="color: rgb(148,57,60);font-weight: bold;font-size: 18px">【热】</span>
                        <span style="font-weight: bold;font-size: 18px;">从零玩转HTML5+跨平台</span>
                        <p style="font-size: 13px;color: rgb(127,127,127);margin-top: 5px;margin-left: 5px;">李南江老师带你从零入门大前端开发，So Easy，To
                            Happy ！</p>
                    </div>
                    <div class="col-md-3" style="color:rgb(148,57,60); margin-top: 50px;">
                        206节课
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>
<!--热门课程结束-->

<!--友情链接开始-->
<section id="link">
<div class="container">
    <div class="row">
        <div class="col-md-12 about-title" style="margin-top: 40px">友情链接</div>
    </div>
    <ul class="link-box">
        <li>
            <img src="img/1.jpeg">
        </li>
        <li>
            <img src="img/2.jpeg">
        </li>
        <li>
            <img src="img/3.jpeg">
        </li>
        <li>
            <img src="img/4.jpeg">
        </li>
        <li>
            <img src="img/7.jpg">
        </li>
        <li>
            <img src="img/8.jpg">
        </li>
    </ul>
</div>
</section>
<!--友情链接结束-->

<!--尾部开始-->
<footer id="footer">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-5 footer-left">
                <div>
                    <span>关于我们</span><span>名师授课</span>
                </div>
                <div>
                    <span>课程介绍</span><span>课堂互动</span>
                </div>
                <div>
                    <span>热门课程</span><span>联系我们</span>
                </div>
            </div>
            <div class="col-md-3 footer-center">
                <p>公司地址：上海市松江区松江大学城</p>
                <p>联系电话：18888888888</p>
                <p>地址邮箱：252336799@qq.com</p>
            </div>
            <div class="col-md-4 footer-right">
                <p>联系我们</p>
                <div>
                    <img src="img/1.jpeg">
                    <img src="img/2.jpeg" style="margin-left: 10px">
                </div>
            </div>
        </div>
    </div>
</footer>
<!--尾部结束-->
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
    $('.remen').click(function () {
        $('html,body').animate({ scrollTop: $('#hot').offset().top }, 1000)
    })

    $('.jieshao').click(function () {
        $('html,body').animate({ scrollTop: $('#product').offset().top }, 1000)
    })

    $('.guanyu').click(function () {
        $('html,body').animate({ scrollTop: $('#about').offset().top }, 1000)
    })

    $('.mingshi').click(function () {
        $('html,body').animate({ scrollTop: $('#link').offset().top }, 1000)
    })

    $('.lianxi').click(function () {
        $('html,body').animate({ scrollTop: $('#footer').offset().top }, 1000)
    })
</script>
</body>
</html>
